<template>
  <el-dialog
    v-model="dialogVisible"
    :title="multiple ? '选择文章' : '选择文章'"
    width="1000px"
    append-to-body
    destroy-on-close
  >
    <el-form :model="queryParams" ref="queryFormRef" :inline="true">
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="queryParams.title" placeholder="请输入文章标题" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="作者" prop="author">
        <el-input v-model="queryParams.author" placeholder="请输入作者" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">
          <Icon icon="ep:search" />
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" />
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="loading"
      :data="list"
      @selection-change="handleSelectionChange"
      height="400px"
    >
      <el-table-column type="selection" width="55" align="center" v-if="multiple" />
      <el-table-column label="文章标题" align="center" prop="title" :show-overflow-tooltip="true" />
      <el-table-column label="作者" align="center" prop="author" />
      <el-table-column label="封面图" align="center" prop="picUrl" width="100">
        <template #default="scope">
          <el-image
            :src="scope.row.picUrl"
            :preview-src-list="[scope.row.picUrl]"
            fit="cover"
            class="w-50px h-50px"
          />
        </template>
      </el-table-column>
      <el-table-column label="浏览量" align="center" prop="browseCount" />
      <el-table-column label="操作" align="center" width="100">
        <template #default="scope">
          <el-button type="primary" link @click="handleSelect(scope.row)">
            选择
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-if="total > 0"
      v-model:total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import * as ArticleApi from '@/api/mall/promotion/article'
import { ArticleVO } from '@/api/mall/promotion/article'

defineOptions({ name: 'ArticleTableSelect' })

const props = defineProps({
  multiple: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['change'])

// 遮罩层
const loading = ref(false)
// 选中数组
const ids = ref<number[]>([])
// 非单个禁用
const single = ref(true)
// 非多个禁用
const multipleDisabled = ref(true)
// 显示搜索条件
const showSearch = ref(true)
// 总条数
const total = ref(0)
// 文章表格数据
const list = ref<ArticleVO[]>([])
// 弹出层标题
const title = ref('')
// 是否显示弹出层
const dialogVisible = ref(false)
// 查询参数
const queryParams = ref({
  pageNo: 1,
  pageSize: 10,
  title: '',
  author: ''
})

// 已选择的文章
const selectedArticles = ref<ArticleVO[]>([])

/** 查询文章列表 */
const getList = async () => {
  loading.value = true
  try {
    const res = await ArticleApi.getArticlePage(queryParams.value)
    list.value = res.list
    total.value = res.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryParams.value = {
    pageNo: 1,
    pageSize: 10,
    title: '',
    author: ''
  }
  handleQuery()
}

/** 多选框选中数据 */
const handleSelectionChange = (selection: ArticleVO[]) => {
  ids.value = selection.map(item => item.id)
  selectedArticles.value = selection
  single.value = selection.length !== 1
  multipleDisabled.value = !selection.length
}

/** 选择按钮操作 */
const handleSelect = (row: ArticleVO) => {
  if (props.multiple) {
    // 多选模式
    const index = selectedArticles.value.findIndex(item => item.id === row.id)
    if (index === -1) {
      selectedArticles.value.push(row)
    } else {
      selectedArticles.value.splice(index, 1)
    }
  } else {
    // 单选模式
    selectedArticles.value = [row]
  }
}

/** 确定按钮操作 */
const handleConfirm = () => {
  emit('change', props.multiple ? selectedArticles.value : selectedArticles.value[0])
  dialogVisible.value = false
}

/** 打开弹窗 */
const open = (articles: ArticleVO[]) => {
  selectedArticles.value = articles
  dialogVisible.value = true
  getList()
}

defineExpose({
  open
})
</script>

<style scoped>
.dialog-footer {
  padding: 20px;
  text-align: right;
}
</style> 